<template>
	<view class="myform-container">

		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control class="uni-padding-wrap_tag" :current="current" :values="items"
				:style-type="styleType" :active-color="activeColor" @clickItem="onClickTab" />
		</view>
		<view class="custom-form">
			<view class="custom-form-item">
				<view class="custom-form-item__label">{{getDataSourceDesc()}}：</view>
				<view class="custom-form-item__desc">
					<uni-data-select v-model="selectPlat" :localdata="platOpts"></uni-data-select>
				</view>
			</view>
			<view class="custom-form-item">
				<view class="custom-form-item__label">选择导入的excel：</view>
				<view class="custom-form-item__desc">
					<uni-file-picker limit="1" :del-icon="false" file-mediatype="all" disable-preview
						@select="selectFileFun($event)"></uni-file-picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import {
		formatDate
	} from '@/common/util.js';
	export default {
		components: {},
		data() {
			return {
				items: ['订单导入', '直播数据导入'],
				importType: ['order', 'video'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text',
				selectPlat: 0,
				platOpts: [],
				dataSourceDesc: "数据来源:",
			};
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
			appConfig() {
				return getApp().globalData.config
			}
		},

		onLoad: function(event) {
			this.queryPlat();
		},


		methods: {

			getDataSourceDesc() {
				return this.current === 0 ? "订单数据来源" : "直播数据来源"
			},

			onClickTab(e) {
				if (this.current === e.currentIndex) {
					return;
				}
				this.current = e.currentIndex
			},

			queryPlat() {
				let apiParam = "classCodes=platInfo";
				this.$api.dataOptsByCodes(apiParam).then(result => {
					if (result && result.code == "200") {
						this.platOpts = result.data["platInfo"];
					}
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "查询失败!",
						duration: 3000
					});
					return;
				});
			},


			/**
			 * @param {Object} 
			 * 
			 * 选择图片
			 * 
			 */
			async selectFileFun(res) {
				uni.showLoading({
					mask: true
				})
				await this.uploadFile(res.tempFilePaths, 1);
			},

			async uploadFile(tempFilePaths, token) {
				if (!tempFilePaths.length) {
					return;
				}
				let that = this;
				debugger;
				for (let i = 0; i < tempFilePaths.length; i++) {
					uni.showLoading({
						mask: true
					});
					const path = tempFilePaths[i];
					//因为我这个后台给的接口一次只能上传一张图片，所以每循环一次就调用接口上传一次
					await uni.uploadFile({
						url: this.urlConfig + "/api/images/upload", //后台地址
						filePath: path,
						name: 'file',
						formData: {
							importType: that.importType[that.current],
						},
						success: uploadFileRes => {
							uni.hideLoading();
							if (uploadFileRes.statusCode === 200) {
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								});
								let dataObj = JSON.parse(uploadFileRes.data);

								let changeValue = this.value ? this.value + this.splitValue + dataObj
									.filename :
									dataObj.filename;
								this.$emit("update-value", changeValue);
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
							}
						},
					});
					console.log('filePathsList', this.imageList);
				}
			},

		},
	};
</script>

<style lang="scss">
	body {
		background-color: #F0F4F7;
	}
</style>

<style lang="scss" scoped>
	.myform-container {
		.uni-common-mt {
			margin-top: 0px;
		}

		.uni-padding-wrap {
			// width: 750rpx;
			padding: 0px 0px;
		}

		.custom-form {
			background-color: #FFFFFF;
			margin-bottom: 8px;
			background-color: #FFFFFF;
			margin: 8px 10px;
			padding: 6px 0;

			.custom-form-item:last-child {
				border-bottom: 0px solid #f0f0f0;
			}

		}

		.custom-form-item {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: normal;
			border-bottom: 0px solid #f0f0f0;
			margin: 2px 5px;

			&__label {
				width: 120px;
				font: 14px 'microsoft yahei';
				font-weight: 400;
				line-height: 25px;
				margin: 10px 10px;
			}


			&__desc {
				display: flex;
				flex-direction: column;
				flex: 1;
				font: 14px 'microsoft yahei';
				color: #666666;
				font: 14px 'microsoft yahei';
				margin-right: 10px;
			}

			&__content {
				margin: 5px 10px;
				font-size: 30rpx;
			}

			/deep/.uni-date {
				&__x-input {
					line-height: 30px;
					height: 30px;
				}
			}

			/deep/.uni-date-editor--x .uni-date__icon-clear {
				border: 6px solid transparent;
			}
		}

		.custom-list {
			/deep/.uni-list {
				margin: 0px 10px;
				width: auto;
			}
		}
	}
</style>